<template>
    <div class="hello">
        <md-card class="md-primary">
            <md-card-header>
                <div class="md-title">
                    <h2 class="md-headline">微博,秒拍,优酷,土豆,爱奇艺,腾讯,搜狐,网易,AcFun,bili,百度贴吧,</h2>
                </div>
                <div class="md-headline">凤凰芒果TV,PPTV聚力,央视,酷6网,56网...视频解析</div>
            </md-card-header>

            <br>
            <br>
            <br>

            <md-card-content>

                <md-layout md-gutter>
                    <md-layout md-flex="65" md-flex-offset="10">

                        <md-input-container>
                            <label class="redredred">请在下面输入中粘贴要解析的视频地址</label>
                            <md-input  placeholder="请粘贴各大视频网站视频的地址" v-model="url"></md-input>
                        </md-input-container>

                    </md-layout>




                    <md-button class="md-dense  " md-flex-offset="5" md-flex="10" @click="parse">解析</md-button>


                </md-layout>


            </md-card-content>
        </md-card>








        <h5>{{title}}</h5>
        <template v-for="seg in streams">
            <h6>格式:
                <span class="redredred">{{seg.container}}</span>
                ,清晰度:
                <span class="redredred">{{seg.video_profile == '__default__' ? '默认' : seg.video_profile }}</span>
                ,大小:
                <span class="redredred">{{computeSize(seg.size)}}</span>

            </h6>
            <button class="md-button md-raised md-primary md-theme-default" @click="playVideo(seg)" >播放器m3u8地址</button>
            <a class="md-button md-raised md-warn md-theme-default" :href="url"  :download="seg.container + format(seg) + key" v-for="(url,key) in seg.src" :key="key">{{seg.container +format(seg) +  key}}</a>
            <hr>
        </template>

        <video v-if="playM3u8" :src="playM3u8" controls autoplay></video>
        <h5 v-if="playM3u8">有部分浏览器不支持播放,请下载M3u8文件到本地,使用播放器播放</h5>




        <md-card md-with-hover>
            <md-card-header>
                <div class="md-title">同时本站还面向中小型创业公司提供视频解析
                    <span class="redredred">API服务</span>
                    和
                    <span class="redredred">源代码</span>
                    洽谈:
                    <a class="redredred" href="mailto:neochau@gmail.com">neochau@gmail.com</a>

                </div>
                <div class="md-subhead redredred">
                    洽谈:neochau@qq.com
                </div>
            </md-card-header>

            <md-card-content>

                <div style="margin:20px">
                    <h4>视频下载解析API的付费定制价格</h4>
                    单位<b>人民币！</b>
                    <h5>1台服务器无限制视频下载解析API:</h5>
                    <ul>
                        <li>7 天 = ¥30</li>
                        <li>1 个月 = ¥80</li>
                        <li>6 个月 = 5 个月 = ¥400</li>
                        <li>12 个月 = 9 个月 = ¥720</li>
                    </ul>
                    <h5>2台服务器无限制视频下载解析API:</h5>
                    费用是1台服务器的1.5倍
                    <ul>
                        <li>1 个月 = 元120</li>
                        <li>6 个月 = 5 个月 = ¥600</li>
                        <li>12 个月 = 9 个月 = ¥1080</li>
                    </ul>
                    <h5>4台服务器无限制视频下载解析API:</h5>
                    费用是1台服务器的2倍
                    <ul>
                        <li>1 个月 = 元160</li>
                        <li>6 个月 = 5 个月 = ¥800</li>
                        <li>12 个月 = 9 个月 = ¥1440</li>
                    </ul>
                    <p>我们欢迎长期有质量的合作，如果您需要2年甚至更久，会有更多的折扣哦！欢迎咨询。</p>
                    <p>API负载平衡服务器（最多4个）：如果当前服务器负载高，那么它会将负载迁移到备用服务器，<b>这意味着更好的性能和稳定性</b>。</p>
                </div>
            </md-card-content>

            <md-card-actions>
                <md-button href="http://www.mojotv.cn">mojoTV美剧资讯</md-button>
                <md-button href="http://video.trytv.org">美剧在线看</md-button>
                <md-button href="http://www.trytv.org">TRY美剧资源下载</md-button>
                <md-button href="https://trytv.taobao.com/">我的淘宝店铺</md-button>
                <md-button href="mailto:neochau@gmail.com">联系我</md-button>
            </md-card-actions>
        </md-card>
    </div>
</template>

<script>
    import {api, generaterToken} from '@/tools/api'
    import qs from 'qs'
    export default {
        name: 'hello',
        data () {

            let myArray = [
                'http://weibo.com/tv/v/FgEjB3dBP?fid=1034:2590b4803e3f3d17acc10d178800635d',
                'http://www.miaopai.com/show/YEDcVcbRbevidEXHhqDG0A8NCJU7aZt5UXfvCw__.htm',
                'http://v.youku.com/v_show/id_XMjk1NDU1MDk1Mg==.html?spm=a2hww.20023042.m_223840.5~5!2~5~5!4~5~5~A&f=50355580',
                'https://v.qq.com/x/page/g05358fy168.html',
                'http://www.iqiyi.com/v_19rr8gr0c8.html',
                'http://www.le.com/ptv/vplay/30635077.html',
                'http://tv.sohu.com/20170812/n600101412.shtml',
                'http://www.acfun.cn/v/ac3912685',
                'https://www.bilibili.com/video/av13207512/',
                'https://www.bilibili.com/video/av13196447/',
            ]
            var rand = myArray[Math.floor(Math.random() * myArray.length)];

            return {
                url: rand,
                data:{},
                title: '',
                streams: [],
                playM3u8:''
            }
        },
        methods: {
            parse(){

                //var params = new URLSearchParams();

//                params.append('url', this.url);
//                params.append('token', generaterToken());

                let params = {
                    url:this.url,
                    token:generaterToken()
                }

                let that = this
                api.post('/api/video-parse', qs.stringify(params))
                    .then(function (response) {
                        console.log(response);
                        that.title = response.data.title
                        that.streams = response.data.streams
                        that.data = response.data
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            computeSize(sizeByte){
                return (sizeByte / 1024 / 1024).toFixed(1) + 'M'
            },
            playVideo(seg){
                if(seg.src.length == 1){
                    this.playM3u8 = seg.src[0];
                }else if (seg.m3u8_url){
                    this.playM3u8 = seg.m3u8_url;
                }
            },
            format(seg){
                let tag = '-';
                if(seg.video_profile){
                    tag = seg.video_profile == '__default__' ? '-' : ('-'+ seg.video_profile + '-');
                }
                return tag;
            }
        },

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .redredred {
        color: red;
    }
    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
